Vue.component('datatable',{
    template:
    '<div>'+
    '<table class="table table-hover" :class="{\'ld-content\':isLoadding}">'+
    '<thead>'+
    '<tr v-html="header"></tr>'+
    '</thead>'+
    '<tbody>'+
    '<tr v-for="v in dbody" :data-id="v[index]"><td v-for="field in fields"><div v-html="putField(v,field)"></div></td><td><slot name="oprate"></slot></td></tr>'+
    '</tbody>'+
    '</table>'+
    '<page :total="total" :current="current"  v-if="dbody.length > 0"></page>'+
    '</div>',
    props:['request','index','fields','header','ctx'],
    data:function(){
        return {
            dbody:[],
            total:0,
            current:1,
            isLoadding:0,
            currentPage:1
        };
    },
    methods:{
        loadPage:function(n){
            this.currentPage = n ;
            this._load(n) ;
        },
        putField:function (v,filed) {
            if(typeof  filed === 'string'){
                return v[filed] ;
            }else{
                return filed.callback.call(this.ctx , v[filed.name] , v) ;
            }
        },
        _load:function(p){
            var _this = this ;
            this.isLoadding = 1 ;

            $.ajax({
                headers: {
                    Accept: "application/json; charset=utf-8"
                },
                url:this.request,
                dataType: "json",
                type: "get",
                data:{p:p},
                success: function (d) {
                    _this.isLoadding = 0 ;
                    _this.dthead = d.colums ;
                    _this.dbody  = d.rows ;

                    //console.log(_this.names);
                    _this.total = d.total ;
                    _this.current = d.current ;
                },
                error:function (xhr,response,error) {
                    console.log(xhr)
                }
            });
        },
        refresh:function (url) {
            if(url){
                this.request = url ;
                this._load(1) ;
            }else{
                this._load(this.currentPage) ;
            }
        }
    },
    computed:{

    },
    mounted:function(){
        this._load(1) ;
    }
})
